<!-- table组件-->
<template>
  <div style="width:100%;overflow-x:auto">
    <el-table :data="tableData" border stripe style="width: 100%" class="g-table-list">
      <el-table-column v-if="hasSera" type="index" label="序号" width="50" align="center"></el-table-column>
      <template v-for="({label,prop,fn,type },idx) in newTableInfos">
        <el-table-column
          :prop="prop"
          :key="idx"
          :label="label"
          :align="numStyle(type)|| 'center'"
          :show-overflow-tooltip="true"
          v-if="!fn"
        >
          <template slot-scope="scope">
            <template v-if="!fn">{{defaultFormatter(scope.row[prop],prop,type)}}</template>
          </template>
        </el-table-column>
        <el-table-column
          v-if="fn"
          :prop="prop"
          :key="idx+prop"
          :label="label"
          :align="numStyle(type)|| 'center'"
          :width="Array.isArray(fn)&&fn.length*60"
        >
          <template v-if="fn" slot-scope="scope">
            <div v-if="Array.isArray(fn)">
              <el-button
                v-for="(btnItem,btnIdx) in defultActiveBtn(scope.row,prop,fn)"
                :key="btnIdx"
                type="text"
                :disabled="btnItem.disabled"
                @click="btnItem.fn(scope.row,btnItem.type)"
              >{{btnItem.label}}</el-button>
            </div>
            <el-button
              class="ellipsis"
              type="text"
              @click="fn(scope.row,scope.$index)"
              v-else
            >{{defaultFormatter(scope.row[prop],prop,type)}}</el-button>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
import api from "@/api/apiPath";
import utils from "@/common/utils";
export default {
  data() {
    return {
      newTableInfos: []
    };
  },
  methods: {
    defaultFormatter(value, prop, type) {
      if (type === "time") return utils.getTimeString(value);
      if (type === "money") {
        if (value === 0) return "0.00";
        if (!value) return "——";
        return utils.formatMoney(value);
      }
      return this.tableFormatter ? this.tableFormatter(prop, value) : value;
    },
    defultActiveBtn(row, prop, btns) {
      return this.activeBtn ? this.activeBtn(row, prop, btns) : btns;
    },
    selection(sele) {
      this.$emit("selectChange", sele);
    },
    numStyle(type) {
      let numLeftArray = ["money", "num"];
      if (numLeftArray.includes(type)) return "left";
    }
  },
  created() {
    //如果是只读，去掉表头操作按钮一栏
    this.newTableInfos = this.tableInfos;
    if (!this.tableReadonly) return;
    this.newTableInfos = this.tableInfos.filter((item, idx) => {
      return item.prop != "changeBtn";
    });
  },
  props: [
    "tableData", //table数据
    "tableInfos", //表格信息{label:'',prop:''}
    "tableFormatter", //格式化数据方法
    "hasSera", //是否含有序号
    "activeBtn", //操作按钮显示规则
    "tableReadonly" //只读 不显示操作按钮,无操作按钮不影响
  ],
  destroyed() {},
  filters: {
    getTimeString(time) {
      return utils.getTimeString(time);
    }
  }
};
</script>


<style lang="stylus" scoped>
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
</style>
<style lang="stylus">
.g-table-list {
  td {
    &.is-left {
      .el-button {
        text-align: left;
      }
    }

    &.is-right {
      .el-button {
        text-align: right;
      }
    }
  }
}
</style>
